<template>
    <el-card>
        <div slot="header">
            <span>商品列表</span>
        </div>

        <el-table :data="tableData" style="width: 100%">
            <!-- 展开部分 -->
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" class="demo-table-expand">

                        <!-- 商品 ID -->
                        <el-form-item label="商品 ID">
                            <span>{{ props.row.id }}</span>
                        </el-form-item>

                        <!-- 商品名称 -->
                        <el-form-item label="商品名称">
                            <span>{{ props.row.name }}</span>
                        </el-form-item>

                        <!-- 所属分类 -->
                        <el-form-item label="所属分类">
                            <span>{{ props.row.category }}</span>
                        </el-form-item>

                        <!-- 商品价格 -->
                        <el-form-item label="商品价格">
                            <span>{{ props.row.price }}</span>
                        </el-form-item>

                        <!-- 商品图片 -->
                        <el-form-item label="商品图片">
                            <img :src="props.row.imgUrl" alt="" width="100">
                        </el-form-item>

                        <!-- 创建时间 -->
                        <el-form-item label="创建时间">
                            <span>{{ props.row.ctime | time}}</span>
                        </el-form-item>

                        <!-- 商品评价 -->
                        <el-form-item label="商品评价">
                            <span>{{ props.row.rating }}</span>
                        </el-form-item>

                        <!-- 商品销量 -->
                        <el-form-item label="商品销量">
                            <span>{{ props.row.sellCount }}</span>
                        </el-form-item>

                        <!-- 商品描述 -->
                        <el-form-item label="商品描述">
                            <span>{{ props.row.goodsDesc }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>

            <el-table-column label="商品名称" prop="name" width="140"></el-table-column>
            <el-table-column label="所属分类" prop="category" width="140"></el-table-column>
            <el-table-column label="商品价格" prop="price" width="140"></el-table-column>
            <el-table-column label="商品图片" prop="imgUrl" width="140">
                <template slot-scope="scope">
                    <img :src="scope.row.imgUrl" width="50">
                </template>
            </el-table-column>
            <el-table-column label="商品描述" prop="goodsDesc" width="140"></el-table-column>

            <!-- 操作 -->
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="edit(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <div class="block">
            <el-pagination
            @size-change="sizeChange"
            @current-change="currentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 25, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total=total>
            </el-pagination>
        </div>
    </el-card>
</template>

<script>
import {goodsList, goodsDel} from "@/api/goods.js";  //引入商品管理模块
export default {
    data() {
        return {
            tableData: [{
                id: "",
                name: '',
                category: '',
                price: '',
                imgUrl: '',
                ctime: "",
                rating: "",
                sellCount: "",
                goodsDesc: '',
            }],
            imgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',  // 图片
            value: true,  // Switch开关
            // 分页器
            currentPage: 1,  //当前在第几页上
            pageSize: 5,  //每页显示多少条
            total: 0,  //总条数
        }
    },

    created(){
        goodsList({
            currentPage: this.currentPage,
            pageSize: this.pageSize,
        });
        this.getData();
    },

    methods: {
        // 编辑按钮
        edit(row) {
            this.$router.push("/goods/edit?row="+JSON.stringify(row));
        },
        // 删除按钮
        async del(row) {
            let res = await goodsDel(row);
            if(res.data.code === 0){
                this.getData();
            }
        },

         // 获取数据渲染到页面上
        async getData(){
            let res = await goodsList({currentPage: this.currentPage, pageSize: this.pageSize});
            this.total = res.data.total;  //总条数
            this.tableData = res.data.data;  //用户数据
        },

         // 分页器
        sizeChange(val) {
            this.pageSize = val;
            this.getData();  //点击分页器时渲染一次
        },
        currentChange(val) {
            this.currentPage = val;
            this.getData();
        }
    },

    filters:{
        time(n){
            let date = new Date(n);
            return date.getFullYear() + "/" + (date.getMonth()+1) + "/" + date.getDate();
        }
    }
}
</script>

<style lang="less" scoped>
.el-table{
    margin-bottom: 20px;
}
.demo-table-expand {
    font-size: 0;
  }
.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
.colgroup .col{
    width: 100px;
}
.demo-table-expand[data-v-8fab765e]{
    padding-left: 58px;
}
</style>